const path = require('path') 
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
    mode: "development", // development  production
    entry: './src/js/main.js', // 入口文件
    
    output: {
        "path": path.join(__dirname,'/build'), // 决定出口文件在哪里
        "filename": "bundle.js", // 设置出口文件的名字。默认情况下，它叫main.js       
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ['style-loader','css-loader','postcss-loader']
            },
            {
                test:/\.less$/,
                use:[{loader: MiniCssExtractPlugin.loader},'css-loader','less-loader','postcss-loader']
            },
            {
                test:/(\.png|\.jpg|\.svg)/,
                use:[{
                    loader:'url-loader',
                    options:{
                        limit:3*1024, // 3* 1024b = 3kb    
                        name:'img/[name].[ext]'                   
                    }
                }]
            },
            {
                // 如果是.vue文件，使用如下的loader
                test: /\.vue$/,
                    loader: 'vue-loader'
            },
            { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" }
        ],
    },
    plugins:[
        new MiniCssExtractPlugin({
            // [name], [hash] 是占位符
            // name: 表示入口文件的名称
            // hash: 一串随机值，是用于区别于本次打包与其它打包的过程。由于源文件有变化，则每次打包时hash都不同
            filename: '[name]-[hash].css',
        }),
        new HtmlWebpackPlugin({ // 打包输出HTML
            
            filename: 'index.html',
            template: path.resolve('./index.html') // 指定模块的位置
        }),
        new CleanWebpackPlugin(),
        new VueLoaderPlugin()
    ],
    devServer: {       
        open: true  // 配置是否自动打开浏览器
    }
}